<template>
    <div>
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item :to="{path: 'home'}"><i class="el-icon-setting"></i> 首页</el-breadcrumb-item>
                <el-breadcrumb-item>分类</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <el-table :data="tableData" @expand="handleExpanded" border v-loading.body="loading" style="width: 100%" ref="multipleTable">
            <el-table-column type="expand">
                <template scope="props">
                    <el-table :data="childData['a' + props.row.c_id]" :show-header="false" style="width: 100%">
                        <el-table-column prop="c_id"  width="88"></el-table-column>
                        <el-table-column prop="c_name" ></el-table-column>
                        <el-table-column prop="c_parent" ></el-table-column>
                        <el-table-column prop="c_sort"  width="92"></el-table-column>
                        <el-table-column prop="c_is_open" width="120">
                            <template  scope="tr">
                                <el-switch v-model="tr.row.c_is_open" on-value="1" off-value="0" on-text="ON" off-text="OFF">
                                </el-switch>
                            </template>
                        </el-table-column>
                        <el-table-column width="100">
                            <template scope="scope">
                                <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </template>
            </el-table-column>
            <el-table-column prop="c_id" label="ID" width="88"></el-table-column>
            <el-table-column prop="c_name" label="类名" sortable></el-table-column>
            <el-table-column prop="c_parent" label="父类"></el-table-column>
            <el-table-column prop="c_sort" label="排序" width="92"></el-table-column>
            <el-table-column prop="c_is_open" label="显示" width="120">
                <template  scope="tr">
                    <el-switch v-model="tr.row.c_is_open" on-value="1" off-value="0" on-text="ON" off-text="OFF">
                    </el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="180">
                <template scope="scope">
                    <el-button size="small" @click="handleAdd(scope.$index, scope.row)">添加</el-button>
                    <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="postData.page"
              :page-sizes="[10, 20, 30, 50]"
              :page-size="postData.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="resultTotal">
            </el-pagination>
        </div>
        <el-dialog title="编辑" :visible.sync="dialogFormVisible">
          <el-form :model="form">
            <el-form-item label="名称" >
              <el-input v-model="form.c_name" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="父ID" >
              <el-input v-model="form.c_parent" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="序号" >
              <el-input v-model="form.c_sort" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="class" >
              <el-input v-model="form.c_class" class="input-width"></el-input>
            </el-form-item>
            <el-form-item label="显示">
                <el-switch
                    v-model="form.c_is_open"
                    on-value="1"
                    off-value="0"
                    on-text="ON"
                    off-text="OFF">
                </el-switch>
            </el-form-item>
            <!-- <el-form-item label="title">
                <el-input type="textarea" v-model="form.c_web_title"></el-input>
            </el-form-item>
            <el-form-item label="keyword">
                <el-input type="textarea" v-model="form.c_web_keyword"></el-input>
            </el-form-item>
            <el-form-item label="description">
                <el-input type="textarea" v-model="form.c_web_description"></el-input>
            </el-form-item> -->

            <el-form-item>
              <el-button type="primary" @click="dialogFormSubmit">提交</el-button>
              <!-- <el-button>取消</el-button> -->
            </el-form-item>
          </el-form>
          <!-- <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="dialogFormSubmit = false">确 定</el-button>
          </div> -->
        </el-dialog>
    </div>
</template>

<script>
import Objres from '@/components/common/ObjResult';
let token = localStorage.getItem('admin-token');
// import qs from 'qs';
// import axios from 'axios';

// axios.interceptors.response.use(function (response) {
//     console.log('axios.interceptors.response.use ===', response);
//     // Do something with response data
//     return response;
// }, function (error) {
//     console.log('axios.interceptors.response.use error===', error);
//     // Do something with response error
//     return Promise.reject(error);
// });

// axios.post('/admin/default/tt', qs.stringify({'pageSize': 10, 'page': 1, 'searchValue': '', 'orderBy': '', 'orderType': '', 'pid': 0}), {
// axios.post('/admin/user/sorry', {}, {
//     // headers: {
//     //     // 'Content-Type': 'application/x-www-form-urlencoded',
//     //     'Accept': 'application/json'
//     // },
//     // headers: {'X-Requested-With': 'XMLHttpRequest'},
//     // Headers: {'Content-Type':'application/x-www-form-urlencoded'}
//     baseURL: 'http://t.fo/',
//     timeout: 6000,
//     validateStatus: function (status) {
//         console.log('validateStatus==', status);
//         return status < 500; // Reject only if the status code is greater than or equal to 500
//     }
// })
// .then((res) => {
//     console.log('axios.post==', res);
// })
// .catch((res) => {
//     console.log('axios.post.error==', res);
// });

// xhr
// var request = new XMLHttpRequest();
// request.open('POST', 'http://t.fo/admin/category/list?token=456', true);
//
// request.onload = function () {
//     console.log('this.status==', this.status);
//     if (this.status >= 200 && this.status < 400) {
//
//     }
// };
//
// request.send();
// console.log('request==', request.responseText);

export default {
    data () {
        return {
            loading: true,
            tableData: null,
            resultTotal: 0,
            postData: {
                'pageSize': 10,
                'page': 1,
                'searchValue': '',
                'orderBy': '',
                'orderType': '',
                'pid': 0
            },
            childPostData: {
                'pageSize': 10,
                'page': 1,
                'searchValue': '',
                'orderBy': '',
                'orderType': '',
                'pid': 0
            },
            childData: [],
            dialogFormVisible: false,
            form: {
                c_name: '',
                c_parent: 0,
                c_sort: 0,
                c_class: '',
                c_is_open: 0,
                c_web_title: '',
                c_web_keyword: '',
                c_web_description: ''
            },
            formLabelWidth: '100px'
        };
    },
    methods: {
        handleSizeChange (val) {
            this.postData.pageSize = val;
            this.getResultByPage(this.postData);
        },
        handleCurrentChange (val) {
            this.page = val;
            this.loading = false;
            this.getResultByPage(this.postData);
        },
        handleAdd (index, row) {
            this.dialogFormVisible = true;
            this.form = {};
        },
        handleEdit (index, row) {
            this.dialogFormVisible = true;
            this.form = row;
        },
        dialogFormSubmit () {
            let self = this;
            this.$http.post(
                self.WEB_CONFIG.weburl + '/admin/category/save?token=' + token,
                self.form,
                {'emulateJSON': true}
            ).then((response) => {
                let res = response.body;
                console.log('res===', res);
                if (res.status === Objres.ObjResult.RESULT_OK) {
                    this.$message({message: '保存成功!', type: 'success'});
                    this.getResultByPage(this.postData);
                } else {
                    this.$message({message: '保存失败!', type: 'error'});
                }
            });
        },
        handleDelete () {
        },
        handleExpanded (row, expanded) {
            this.childPostData.pid = row.c_id;
            this.getResultByPage(this.childPostData, 'a', row.c_id);
            expanded = false;
            console.log('row===', row);
            console.log('expanded===', expanded);
            console.log('this.$refs.multipleTable===', this.$refs.multipleTable);
        },
        getResultByPage (data, type, id) {
            let self = this;
            self.loading = true;
            this.$http.post(
                self.WEB_CONFIG.weburl + '/admin/category/list?token=' + token,
                data
            ).then((response) => {
                self.loading = false;
                console.log('getResultByPage res===', response.status);
                let res = response.body;
                if (res.status === Objres.ObjResult.RESULT_OK) {
                    if (type && type === 'a') {
                        self.$set(self.childData, type + id, res.data.result);
                        console.log('self.childData===', self.childData);
                    } else {
                        self.tableData = res.data.result;
                        self.resultTotal = parseInt(res.data.total);
                    }
                }
            }, (err) => { console.log('getResultByPage err=', err); });
        }
    },
    created () {
        this.getResultByPage(this.postData);
    }
};
</script>

<style>
.input-width {
    width: 200px;
}
</style>
